<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Bugatti Chiron: Breaking new dimensions</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style3.css">
    <link rel="stylesheet" href="css/style1.css">
    <link rel="shortcut icon" href="https://assets.bugatti.com/favicon.284416621.ico">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
</head>
<body>




<!--<nav class="navbar navbar-expand-lg navbar-light">-->
    <!--<a class="navbar-brand" href="index.html"><img src="img/ww.webp" alt=""></a>-->
    <!--<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">-->
        <!--<span class="navbar-toggler-icon"></span>-->
    <!--</button>-->
    <!--<div class="container">-->
        <!--<div class="collapse navbar-collapse" id="navbarSupportedContent">-->
            <!--<ul class="navbar-nav mr-auto">-->
                <!--<li class="nav-item active ">-->
                    <!--<a class="nav-link dropdown-toggle" href="index.html">CHIRON</a>-->
                <!--</li>-->
                <!--<li class="nav-item active">-->
                    <!--<a class="nav-link dropdown-toggle" href="there.html">BUGATTI-->
                    <!--</a>-->
                <!--</li>-->
                <!--<li class="nav-item active a1">-->
                    <!--<a class="nav-link dropdown-toggle" href="two.html">CHIRON SPORT</a>-->
                <!--</li>-->
                <!--<li class="nav-item active">-->
                    <!--<a class="nav-link dropdown-toggle" href="#">TRADITION</a>-->
                <!--</li>-->
                <!--<li class="nav-item active">-->
                    <!--<a class="nav-link dropdown-toggle" href="#">MOLSHEIM</a>-->
                <!--</li>-->
                <!--<li class="nav-item active">-->
                    <!--<a class="nav-link dropdown-toggle" href="#">OWNERSHIP</a>-->
                <!--</li>-->
            <!--</ul>-->
            <!--<form class="form-inline my-2 my-lg-0">-->
                <!--<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">-->
                <!--<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>-->
            <!--</form>-->
        <!--</div>-->
    <!--</div>-->

<!--</nav>-->


<nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand" href="index.html"><img src="img/ww.webp" alt=""></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="container">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="index.html">
                        CHIRON
                    </a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link a1" href="there.html">
                        BUGATTI

                    </a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="two.html">
                        CHIRON SPORT
                    </a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">
                        TRADITION
                    </a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">
                        MOLSHEIM

                    </a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">
                        OWNERSHIP
                    </a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </div>

</nav>







<div class="dv-p"></div>
<main>

    <div class="swiper non">
        <div class="sw1">
            <h1 class="sw2">
                Bugatti
                <br>
                Chiron
                </h1>
        </div>
        <img src="img/yin1.webp" alt="">
    </div>

    <div class="onoe">
        <img src="img/c2.webp" alt="">
        <h1>BUGATTI
            <br>
            CHIRON</h1>
    </div>

    <div id="app">
    <ul>
        <li class="main2" v-for="url in mess">
            <img :src="url.images" alt="">
            <div class="navv">
                <h3>{{url.h3}}</h3>
                <p>{{url.title}}</p>
            </div>

        </li>
    </ul>
</div>

    <div class="swiper-container daa">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/t1.webp" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/t2.webp" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/t3.webp" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/t4.webp" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/t5.webp" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/t6.webp" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/t7.webp" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/t8.webp" alt="">
            </div>

            <div class="swiper-slide">
                <img src="img/t9.webp" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/t10.webp" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

    </div>

    <div class="text-con">
        <h2>DISCOVER YOUR INSPIRATION</h2>
        <div class="text-content-container">
            <div class="text-1">
                <p>
                    Each CHIRON is one of a kind; an exquisite masterpiece
                    of breathtaking power and unrivalled beauty. To build
                    each customer’s unique work of art, BUGATTI designers
                    collaborate closely with the owner to create a car that
                    fits their personality, while matching the brand’s captivating
                    legend status and ardent commitment to utmost quality.
                    There are virtually no limits to the levels of personalisation
                    that can be achieved.
                </p>
            </div>
            <div class="text-2">
                <p>
                    A vast selection of colour and material combinations
                    is available, from the finest hand-picked leather to
                    precious metals. Individual engravings or embroidery
                    add the personalised finishing touch, making every CHIRON
                    as unique as its owner. Below you can be inspired by a small
                    selection of the countless possibilities available:
                </p>
            </div>
        </div>
    </div>

    <div class="main4">

            <ul class="nav">
                <li class="active" id="ja">
                    <img src="img/yuan1.webp" alt="">
                </li>
                <li id="ja1">
                    <img id="img" src="img/yuan2.webp" alt="">
                </li>
                <li>
                    <img id="img1" src="img/yuan3.webp" alt="">
                </li>
                <li>
                   <img id="img2" src="img/yy.webp" alt="">
               </li>
                <li>
                    <img id="img3" src="img/yuan5.webp" alt="">
                </li>
                <li>
                    <img id="img4" src="img/yuan6.webp" alt="">
                </li>
                <li>
                    <img id="img5" src="img/yuan7.webp" alt="">
                </li>
            </ul>
            <div class="main">

                <div class="swiper-container sw1 active">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="img/yyy1.webp" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="img/th1.webp" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="img/th3.webp" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="img/th4.webp" alt="">
                            </div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination swiper-pagination-white"></div>
                        <!-- Add Arrows -->
                        <div class="swiper-button-next swiper-button-white"></div>
                        <div class="swiper-button-prev swiper-button-white"></div>
                    </div>

                <div class="swiper-container sw2">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="img/yyy2.webp" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="img/th2.webp" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="img/th5.webp" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="img/th6.webp" alt="">
                            </div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination swiper-pagination-white"></div>
                        <!-- Add Arrows -->
                        <div class="swiper-button-next swiper-button-white"></div>
                        <div class="swiper-button-prev swiper-button-white"></div>
                    </div>

                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="img/yyy3.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/th8.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/th9.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/th10.webp" alt="">
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination swiper-pagination-white"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>

                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="img/yyy4.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/th11.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/th12.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/th13.webp" alt="">
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination swiper-pagination-white"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>

                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="img/yyy5.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/挺好5.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/th16.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/th17.webp" alt="">
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination swiper-pagination-white"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>

                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="img/yyy6.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/th18.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/th19.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/th20.webp" alt="">
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination swiper-pagination-white"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>

                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="img/yyy7.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/th21.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/th22.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/th23.webp" alt="">
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination swiper-pagination-white"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>

            </div>
    </div>

    <div class="text-con">
        <h2>GROUNDBREAKING ENGINEERING</h2>
        <div class="text-content-container">
            <div class="text-1">
                <p>
                    The heart of the CHIRON is its quad-turbocharged 8 l W16 engine.
                    This unique masterpiece generates an incredible 1,500 hp and 1,600 Nm
                    of torque, with an almost linear power output between 2,000 and 6,000 rpm.
                    Four high-performing turbochargers work in a two-stage controlled
                    configuration, and define this champion of performance. A remarkable
                    60,000 litres of air are pumped through the engine every minute.
                </p>
            </div>
            <div class="text-2">
                <p>
                    Simultaneously, 800 litres of water per minute circulate through the
                    CHIRON’s heart, and guarantee the cooling of the engine and generate
                    the extraordinary power. The new titanium exhaust system, with reduced
                    gas back pressure, boosts this performance further. To maximise the
                    CHIRON’s engine power, lightweight materials, such as titan and carbon
                    fibre, have been used wherever possible.
                </p>
            </div>
        </div>
    </div>

    <div class="main5">
        <div></div>
        <div class="imga">
            <img src="img/fadongji.webp" alt="">
        </div>
    </div>

    <div class="top-text">
        <div class="one">
            Fuel consumption, l/100km: 35.2 in urban areas / 15.2 in extra urban areas / 22.5 combined; combined CO
            <sub>2</sub>
            emissions g/km: 516; efficiency class: G
        </div>
        <div class="two">
            WLTP: Fuel consumption, l/100km: low 43.3 / medium 22.2 / high 18.0 / extra high 18.3 / combined 22.3; CO
            <sub>2</sub>
            emissions, combined, g/km: 506; efficiency class: G
        </div>
    </div>

    <div class="buttom-text">
        <div class="one1" id="one">
            <ul>
                <li class="li1">
                    <a href="" title="Facebook">
                        <img class="imgg imggg" src="images/f_03.gif" alt="">
                    </a>
                </li>
                <li class="li2">
                    <a href="" title=" Facebook Messenger">
                        <img src="images/sd_06.gif" alt="">
                    </a>
                </li>
                <li class="li3">
                    <a href="" title="Whatsapp">
                        <img src="images/dh_06.gif" alt="">
                    </a>
                </li>
                <li class="li4">
                    <a href="" title="Twitter">
                        <img class="imgg" src="images/xn_06.gif" alt="">
                    </a>
                </li>
                <li class="li5">

                    <a href="" title="LinkedIn">
                        <img class="imgg" src="images/in1_06.gif" alt="">
                    </a>
                </li>
                <li class="li6">
                    <a href="" title="Mail">
                        <img class="imgg"  src="images/you1_06.gif" alt="">
                    </a>
                </li>

            </ul>
        </div>

        <div class="two1" id="two1">
                <span>
                    SHARE
                    <img class="img2" src="images/sandian_03.gif" alt="">
                </span>


        </div>
    </div>

</main>
<footer class="footer1">
    <div class="nav">
        <div title="Go" id="to-top">
            <img class="" src="images/to-top_03.gif" alt="">
        </div>


            <ul class="foot">
                <li class="di-1">
                    <a href="" title="Facebook"><img class="imggg" src="images/heif_06.gif" alt=""></a>
                </li>
                <li class="di-2">
                    <a href="" title="Twitter"><img class="imgg" src="images/niao1_03.gif" alt=""></a>
                </li>
                <li class="di-3">
                    <a href="" title="Instagram"><img class="imgg" src="images/fang1_03.gif" alt=""></a>
                </li>
                <li class="di-4">
                    <a href="" title="Pinterest">
                        <img src="images/q1_03.gif" alt="">
                    </a>
                </li>
                <li class="di-5">
                    <a href="" title="YouTube"><img src="images/bof_03.gif" alt=""></a>
                </li>
                <li class="di-6">
                    <a href="" title="LinkedIn"><img src="images/in2_03.gif" alt=""></a>
                </li>
            </ul>
    </div>

    <div class="footer-zj">
        <span>© 2019 BUGATTI AUTOMOBILES S.A.S</span>
    </div>

    <div class="footer-footer">
        <ul>
            <li><a href="">CONTACT</a></li>
            <li><a href="">MEDIA</a></li>
            <li><a href="">DATA PROTECTION NOTICE</a></li>
            <li><a href="">LEGAL NOTICE</a></li>
            <li><a href="">UK MODERN SLAVERY ACT</a></li>
            <li><a href="">CODE OF CONDUCT</a></li>
        </ul>
    </div>

</footer>


<script src="swiper-4.5.0/dist/js/swiper.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/there.js"></script>
</body>
</html>